<template>
  <div class="course-list-container m-center">
    <!-- 标题 -->
    <h2 class="home-title">
      <i class="title-icon left-icon" :style="getBackgroundPosition(course.leftIcon)" />
      {{ course.title }}
      <i class="title-icon right-icon" :style="getBackgroundPosition(course.rightIcon)" />
    </h2>

    <!-- 课程列表 -->
    <course-list
      v-if="course.data"
      class="course-list"
      :list="course.data"
      @courseClick="handleCourseClick"
    />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
import CourseList from 'components/course/course.vue'
export default {
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 课程点击
    handleCourseClick (row) {
      if (this.userInfo.identity == undefined) {
        //未登录
        this.$router.push(`/course/${row.id}`)
      } else {
        //判断是否是vip身份
        if (row.type != '免费' && this.userInfo.identity != '管理员' && this.userInfo.identity != row.type) {
          this.$message.error('您还不是VIP身份，请联系管理员购买VIP身份')
          return;
        }
        this.$router.push(`/course/${row.id}`)
      }
    },
    getBackgroundPosition (position) {
      return {
        'background-position': position
      }
    }
  },
  components: {
    CourseList
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  @import '~assets/stylus/mixin.styl';
  .course-list-container
    padding: 36px 0 48px;
    .split-banner
      display: flex;
      align-items: center;
      margin-top: 24px;
      .split-banner-item
        position: relative;
        flex: 1;
        margin: 0 8px 16px 8px;
        height: 108px;
        background-color: rgba(7,17,27,0.5);
        & > img
          display: block;
          width: 100%;
          height: 100%;
          background-color: #ccc;
          border-radius: 8px;
        .title
          z-index: 3;
          position: absolute;
          left: 0;
          right: 0;
          color: #fff;
          text-align: center;
          &.main
            top: 30%;
            font-size: 20px;
            line-height: 28px;
            font-weight: 700;
          &.sub
            top: 55%;
            font-size: 12px;
            line-height: 24px;
        .mask
          z-index: 1;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-color: rgba(7,17,27,0.4);
          border-radius: 8px;
    .course-list
      margin-top: 24px;
</style>
